import React, { Component, Suspense } from 'react';
import { Route,Redirect,Switch } from 'react-router-dom'
class RouterView extends Component {
    render() {
        return (
            <Suspense fallback={<div className='loading'>loading...</div>}>
            <Switch>
                {
                    this.props.routes.map((route,index)=>{
                        if( route.path != '*' && route.component ){ 
                            return <Route key={index} path={route.path} render={(props)=>{
                                return <route.component {...props} routes={route.children} ></route.component>
                            }}></Route>
                        }else if( route.redirect ){
                            return <Redirect key={index} exact from={route.from} to={route.to} ></Redirect>
                        }else{  
                            return <Route key={index} path={route.path} component={route.component}></Route>
                        }
                    })
                }
            </Switch>
        </Suspense>
        );
    }
}

export default RouterView;